<template>
	<view class="status">
		<view class="status_item" :style="`grid-column:${item.column};`" v-for="(item, index) in data" :key="index">
			<view class="status_item_label">
				{{$t(item.name)}}
			</view>
			<view class="status_item_content" :class="item.color ?'red':''">
				<view class="status_item_content_du du">
					{{item.temperature}}
				</view>
				<view class="status_item_content_pa pa" v-if="item.pressure">
					{{item.pressure}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	let data = ref({
		liner: {
			name: "plugin.devices.status.name.innerLiner",
			column: "1/4",
			temperature: 30,
			pressure: 80,
		},
		evaporator: {
			name: "plugin.devices.status.name.evaporator",
			column: "4/7",
			temperature: 30,
			pressure: 80
		},
		condenser: {
			name: "plugin.devices.status.name.condenser",
			column: "1/3",
			temperature: 30,
			pressure: 0
		},
		cabinetDoor: {
			name: "plugin.devices.status.name.cabinetDoor",
			column: "3/5",
			temperature: 30,
			pressure: 0
		},
		backCabinetDoor: {
			name: "plugin.devices.status.name.backCabinetDoor",
			column: "5/7",
			temperature: 30,
			pressure: 0
		},
	})

	function getRandomIntInclusive(min, max) {
		min = Math.ceil(min);
		max = Math.floor(max);
		return Math.floor(Math.random() * (max - min + 1)) + min;
	}

	let keys = Object.keys(data.value)
	let max = keys.length;
	setInterval(_ => {
		let current = getRandomIntInclusive(1, max) - 1
		let key = keys[current];
		data.value[key].temperature = getRandomIntInclusive(30, 100)
		if (key == 'liner' || key == 'evaporator') {
			data.value[key].pressure = getRandomIntInclusive(10, 200)
		}
		data.value[key].color = true
		setTimeout(_ => {
			data.value[key].color = false
		}, 2000)

	}, 5000)
</script>

<style lang="scss" scoped>
	.status {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: repeat(2, 1fr);
		gap: 15px;

		.red {
			color: #f00;
		}

		&_item {
			&_content {
				background: var(--bg);
				padding: 6px;
				display: flex;
				justify-content: center;
				text-align: center;
				font-size: 20px;
				font-weight: bold;
				border-radius: 6px;
				margin-top: 5px;

				.du {
					&::after {
						content: "℃";
						font-size: 14px;
						font-weight: normal;
					}
				}

				.pa {
					&::after {
						content: "Pa";
						font-size: 14px;
						font-weight: normal;
					}
				}

				&_du {
					width: 100%;
				}

				&_pa {
					width: 100%;
					border-left: 1px solid #ddd;
				}
			}
		}
	}
</style>